<template>
	<view class="favorites-container">
		<!-- 顶部紫色渐变背景 -->
		<view class="top-bg">
			<view class="bg-shape bg-shape-1"></view>
			<view class="bg-shape bg-shape-2"></view>
			<view class="bg-shape bg-shape-3"></view>
		</view>

		<!-- 返回按钮 -->
		<view class="back-btn" @click="goHome">
			<image class="back-icon" src="/static/icons/back.png" mode="aspectFit"></image>
		</view>

		<scroll-view class="content" scroll-y @refresherrefresh="onRefresh" refresher-enabled>
			<!-- 页面标题 -->
			<view class="page-header">
				<view class="header-content">
					<text class="page-title">我的收藏</text>
					<text class="page-subtitle">共 {{ totalCount }} 个收藏</text>
				</view>
			</view>

			<!-- 搜索框 -->
			<view class="search-section">
				<view class="search-box">
					<text class="search-icon">🔍</text>
					<input class="search-input" v-model="searchKeyword" placeholder="搜索收藏商品..."
						@input="onSearchInput" />
					<view v-if="searchKeyword" class="search-clear" @click="clearSearch">
						<text>×</text>
					</view>
				</view>
			</view>

			<!-- 收藏列表 -->
			<view class="favorites-list">
				<!-- 空状态 -->
				<view v-if="favoritesList.length === 0 && !loading" class="empty-state">
					<view class="empty-icon">❤️</view>
					<text class="empty-title">
						{{ searchKeyword ? '未找到相关收藏' : '暂无收藏商品' }}
					</text>
					<text class="empty-desc">
						{{ searchKeyword ? '请尝试搜索其他商品' : '快去发现喜欢的商品吧~' }}
					</text>
					<view class="empty-action">
						<button class="action-btn" @click="goHome">去首页逛逛</button>
					</view>
				</view>

				<!-- 收藏商品卡片 -->
				<view v-for="(item, index) in favoritesList" :key="item.good_id" class="favorite-card">
					<view class="card-header">
						<view class="product-basic">
							<text class="product-name">{{ item.good_name }}</text>
							<text class="product-id">商品ID: {{ item.good_id }}</text>
						</view>
						<view class="card-actions">
							<view class="delete-btn" @click="removeFavorite(item.good_id, index)">
								<text class="delete-text">取消收藏</text>
							</view>
						</view>
					</view>

					<view class="card-content">
						<view class="product-stats">
							<view class="stat-item">
								<text class="stat-label">售价</text>
								<text class="stat-value price">¥{{ formatPrice(item.good_sell_price) }}</text>
							</view>
							<view class="stat-item">
								<text class="stat-label">好评率</text>
								<text
									class="stat-value rating">{{ (item.good_positive_review_rate * 100).toFixed(1) }}%</text>
							</view>
						</view>

						<view class="product-description">
							<text class="desc-text">{{ item.good_description || '暂无描述' }}</text>
						</view>

						<view class="card-footer">
							<text class="favorite-time">收藏时间: {{ formatTime(item.created_at) }}</text>
							<view class="action-buttons">
								<button class="action-btn detail" @click="showProductDetail(item)">查看详情</button>
								<button class="action-btn buy" @click="showCreateOrder(item)">立即购买</button>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="loading && !isRefreshing" class="loading-state">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 没有更多数据 -->
				<view v-if="noMoreData && favoritesList.length > 0" class="no-more">
					<text>已加载全部 {{ totalCount }} 个收藏</text>
				</view>

				<!-- 加载更多按钮 -->
				<view v-if="!noMoreData && favoritesList.length > 0 && !loading" class="load-more-section">
					<view class="load-more-text" @click="loadMore">
						<text class="load-more-link">加载更多</text>
					</view>
				</view>

				<!-- 搜索模式下提示 -->
				<view v-if="searchKeyword && favoritesList.length > 0" class="search-tips">
					<text>共查找到 {{ favoritesList.length }} 个收藏</text>
					<text class="tips-action" @click="clearSearch">查看全部</text>
				</view>
			</view>

			<!-- 底部安全区域 -->
			<view class="bottom-space"></view>
		</scroll-view>

		<!-- 商品详情弹窗 -->
		<view v-if="showDetailModal" class="modal-mask" @click="closeDetailModal">
			<view class="modal-content product-detail-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">商品详情</text>
					<text class="modal-close" @click="closeDetailModal">×</text>
				</view>
				<view class="modal-body">
					<view class="detail-section" v-if="selectedProduct">
						<text class="section-title">基本信息</text>
						<view class="detail-grid">
							<view class="detail-item">
								<text class="detail-label">商品ID：</text>
								<text class="detail-value">{{ selectedProduct.good_id }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">商品名称：</text>
								<text class="detail-value">{{ selectedProduct.good_name }}</text>
							</view>
						</view>
					</view>

					<view class="detail-section" v-if="selectedProduct">
						<text class="section-title">销售信息</text>
						<view class="sales-stats">
							<view class="stat-row">
								<text class="stat-label">销售价格</text>
								<text
									class="stat-value price">¥{{ formatPrice(selectedProduct.good_sell_price) }}</text>
							</view>
							<view class="stat-row">
								<text class="stat-label">好评率</text>
								<text
									class="stat-value rating">{{ (selectedProduct.good_positive_review_rate * 100).toFixed(1) }}%</text>
							</view>
						</view>
					</view>

					<view class="detail-section" v-if="selectedProduct && selectedProduct.good_description">
						<text class="section-title">商品描述</text>
						<view class="description-content">
							<text class="desc-text">{{ selectedProduct.good_description }}</text>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button confirm" @click="closeDetailModal">关闭</button>
				</view>
			</view>
		</view>

		<!-- 创建订单弹窗 -->
		<view v-if="showOrderModal" class="modal-mask" @click="closeOrderModal">
			<view class="modal-content order-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">创建订单</text>
					<text class="modal-close" @click="closeOrderModal">×</text>
				</view>
				<view class="modal-body">
					<view class="order-info" v-if="selectedProduct">
						<view class="product-info">
							<text class="product-name">{{ selectedProduct.good_name }}</text>
							<text class="product-price">¥{{ formatPrice(selectedProduct.good_sell_price) }}</text>
						</view>

						<view class="order-form">
							<view class="form-item">
								<text class="form-label">购买数量</text>
								<view class="quantity-control">
									<button class="quantity-btn" @click="decreaseQuantity">-</button>
									<text class="quantity-value">{{ orderQuantity }}</text>
									<button class="quantity-btn" @click="increaseQuantity">+</button>
								</view>
							</view>

							<view class="form-item address-item">
								<text class="form-label">收货地址</text>
								<view class="custom-address-selector">
									<view class="custom-select-view" @click="toggleAddressOptions">
										<text
											class="select-text">{{ selectedAddress ? selectedAddress.formatted_address : '请选择收货地址' }}</text>
										<text class="select-arrow">{{ showAddressOptions ? '▲' : '▼' }}</text>
									</view>
									<view v-if="showAddressOptions" class="custom-select-options">
										<view v-for="(address, index) in addressList" :key="address.address_id"
											class="custom-option" :class="{ active: selectedAddressIndex === index }"
											@click="selectAddress(address, index)">
											<text>{{ address.formatted_address }}</text>
											<text v-if="address.is_default" class="default-tag">默认</text>
										</view>
										<view v-if="addressList.length === 0" class="custom-option empty-option">
											<text>暂无地址，请先添加</text>
										</view>
									</view>
								</view>
							</view>

							<view class="total-amount">
								<text class="total-label">总金额：</text>
								<text
									class="total-value">¥{{ formatPrice(selectedProduct.good_sell_price * orderQuantity) }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button cancel" @click="closeOrderModal">取消</button>
					<button class="modal-button confirm" @click="createOrder">确认下单</button>
				</view>
			</view>
		</view>

		<!-- 全局加载遮罩 -->
		<view class="loading-mask" v-if="globalLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">处理中...</text>
		</view>
	</view>
</template>

<script>
	const API_BASE_URL = 'http://localhost:8000/api/v1';

	export default {
		data() {
			return {
				searchKeyword: '',
				favoritesList: [],
				loading: false,
				globalLoading: false,
				isRefreshing: false,
				searchTimer: null,
				currentPage: 1,
				pageSize: 5,
				totalCount: 0,
				noMoreData: false,

				// 弹窗相关
				showDetailModal: false,
				showOrderModal: false,
				selectedProduct: null,

				// 订单相关
				orderQuantity: 1,
				orderAddress: '',
				selectedAddress: null,
				selectedAddressIndex: -1,
				addressList: [],
				showAddressOptions: false
			}
		},

		onLoad() {
			console.log('收藏页面加载');
			this.loadFavorites(true);
		},

		onPullDownRefresh() {
			this.loadFavorites(true);
		},

		methods: {
			// 返回首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},

			// 下拉刷新
			onRefresh() {
				this.loadFavorites(true);
			},

			// 加载更多
			loadMore() {
				if (this.loading || this.noMoreData || this.searchKeyword) return;
				this.currentPage++;
				this.loadFavorites(false);
			},

			// 加载收藏列表
			async loadFavorites(refresh = false) {
				if (this.loading) return;

				this.loading = true;
				if (refresh) {
					this.isRefreshing = true;
					this.currentPage = 1;
					this.noMoreData = false;
				}

				try {
					const token = uni.getStorageSync('token');
					if (!token) {
						throw new Error('未登录');
					}

					let url = `${API_BASE_URL}/users/favorites?page=${this.currentPage}&page_size=${this.pageSize}`;

					// 如果有搜索关键词，使用搜索接口
					if (this.searchKeyword) {
						url =
							`${API_BASE_URL}/users/favorites/search?keyword=${encodeURIComponent(this.searchKeyword)}&page=${this.currentPage}&page_size=${this.pageSize}`;
					}

					console.log('请求收藏列表:', url);

					const response = await new Promise((resolve, reject) => {
						uni.request({
							url: url,
							method: 'GET',
							header: {
								'Authorization': `Bearer ${token}`,
								'Content-Type': 'application/json'
							},
							success: (res) => {
								console.log('请求成功:', res);
								resolve(res);
							},
							fail: (err) => {
								console.log('请求失败:', err);
								reject(err);
							}
						});
					});

					console.log('收藏列表响应:', response);

					if (response && response.statusCode === 200) {
						const data = response.data;

						// 处理分页数据
						if (data && data.items) {
							// 分页格式：{ items: [], total: 100, page: 1, page_size: 5, has_more: true }
							const items = data.items || [];
							this.totalCount = data.total || 0;

							if (refresh) {
								this.favoritesList = items;
							} else {
								this.favoritesList = [...this.favoritesList, ...items];
							}

							// 判断是否还有更多数据
							this.noMoreData = !data.has_more;
						} else {
							// 非分页格式（兼容旧版本）
							const items = data || [];
							if (refresh) {
								this.favoritesList = items;
							} else {
								this.favoritesList = [...this.favoritesList, ...items];
							}

							// 如果没有总数，使用当前列表长度
							this.totalCount = this.favoritesList.length;

							// 判断是否还有更多数据
							this.noMoreData = items.length < this.pageSize;
						}

						console.log('收藏列表数据:', this.favoritesList);
						console.log('当前页:', this.currentPage, '数据条数:', this.favoritesList.length, '是否还有更多:', !this
							.noMoreData);
					} else {
						const errorMsg = response.data?.detail || `加载失败，状态码: ${response?.statusCode}`;
						throw new Error(errorMsg);
					}
				} catch (error) {
					console.error('加载收藏失败:', error);
					uni.showToast({
						title: error.message || '网络错误',
						icon: 'none'
					});
					if (refresh) {
						this.favoritesList = [];
					}
				} finally {
					this.loading = false;
					this.isRefreshing = false;
					uni.stopPullDownRefresh();
				}
			},

			// 搜索输入
			onSearchInput() {
				// 防抖处理
				clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.currentPage = 1;
					this.loadFavorites(true);
				}, 500);
			},

			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
				this.currentPage = 1;
				this.loadFavorites(true);
			},

			// 移除收藏
			async removeFavorite(goodId, index) {
				uni.showModal({
					title: '取消收藏',
					content: '确定要取消收藏这个商品吗？',
					confirmColor: '#FF4444',
					confirmText: '取消收藏',
					cancelText: '再想想',
					success: async (res) => {
						if (res.confirm) {
							this.globalLoading = true;
							try {
								const token = uni.getStorageSync('token');
								const response = await new Promise((resolve, reject) => {
									uni.request({
										url: `${API_BASE_URL}/users/favorites/${goodId}`,
										method: 'DELETE',
										header: {
											'Authorization': `Bearer ${token}`,
											'Content-Type': 'application/json'
										},
										success: resolve,
										fail: reject
									});
								});

								if (response.statusCode === 200) {
									uni.showToast({
										title: '取消收藏成功',
										icon: 'success'
									});
									// 从列表中移除
									this.favoritesList.splice(index, 1);
									this.totalCount = Math.max(0, this.totalCount - 1);
								} else {
									throw new Error(response.data?.detail || '取消收藏失败');
								}
							} catch (error) {
								console.error('取消收藏失败:', error);
								uni.showToast({
									title: error.message || '网络错误',
									icon: 'none'
								});
							} finally {
								this.globalLoading = false;
							}
						}
					}
				});
			},

			// 显示商品详情弹窗
			showProductDetail(product) {
				this.selectedProduct = product;
				this.showDetailModal = true;
			},

			// 关闭商品详情弹窗
			closeDetailModal() {
				this.showDetailModal = false;
				this.selectedProduct = null;
			},

			// 显示创建订单弹窗
			async showCreateOrder(product) {
				this.selectedProduct = product;
				this.orderQuantity = 1;
				this.selectedAddress = null;
				this.selectedAddressIndex = -1;
				this.orderAddress = '';
				this.showAddressOptions = false;

				// 加载用户地址列表
				await this.loadUserAddresses();
				this.showOrderModal = true;
			},

			// 加载用户地址列表
			async loadUserAddresses() {
				try {
					const token = uni.getStorageSync('token');
					console.log('请求地址列表，token:', token ? '存在' : '不存在');

					const response = await new Promise((resolve, reject) => {
						uni.request({
							url: `${API_BASE_URL}/users/addresses`,
							method: 'GET',
							header: {
								'Authorization': `Bearer ${token}`,
								'Content-Type': 'application/json'
							},
							success: resolve,
							fail: reject
						});
					});

					console.log('地址列表响应:', response);

					if (response.statusCode === 200) {
						const data = response.data;
						console.log('地址列表数据:', data);

						if (data.has_addresses && data.addresses && data.addresses.length > 0) {
							this.addressList = data.addresses;
							// 如果有默认地址，自动选择
							if (data.default_address_id) {
								const defaultAddress = data.addresses.find(addr => addr.address_id === data
									.default_address_id);
								if (defaultAddress) {
									this.selectedAddress = defaultAddress;
									this.selectedAddressIndex = data.addresses.indexOf(defaultAddress);
									this.orderAddress = defaultAddress.formatted_address;
									console.log('已选择默认地址:', defaultAddress);
								}
							} else if (data.addresses.length > 0) {
								// 如果没有默认地址，选择第一个
								this.selectedAddress = data.addresses[0];
								this.selectedAddressIndex = 0;
								this.orderAddress = data.addresses[0].formatted_address;
								console.log('已选择第一个地址:', data.addresses[0]);
							}
							console.log('地址列表加载成功，共', data.addresses.length, '个地址');
						} else {
							this.addressList = [];
							console.log('用户没有地址');
							uni.showToast({
								title: '请先添加收货地址',
								icon: 'none',
								duration: 2000
							});
						}
					} else {
						console.error('地址列表响应错误:', response);
						throw new Error(response.data?.detail || `获取地址失败，状态码: ${response.statusCode}`);
					}
				} catch (error) {
					console.error('加载地址失败:', error);
					this.addressList = [];
					uni.showToast({
						title: '获取地址失败，请手动输入地址',
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 切换地址选项显示
			toggleAddressOptions() {
				this.showAddressOptions = !this.showAddressOptions;
			},

			// 选择地址
			selectAddress(address, index) {
				this.selectedAddress = address;
				this.selectedAddressIndex = index;
				this.orderAddress = address.formatted_address;
				this.showAddressOptions = false;
				console.log('选择了地址:', address);
			},

			// 关闭创建订单弹窗
			closeOrderModal() {
				this.showOrderModal = false;
				this.selectedProduct = null;
				this.orderQuantity = 1;
				this.selectedAddress = null;
				this.selectedAddressIndex = -1;
				this.orderAddress = '';
				this.addressList = [];
				this.showAddressOptions = false;
			},

			// 增加数量
			increaseQuantity() {
				this.orderQuantity++;
			},

			// 减少数量
			decreaseQuantity() {
				if (this.orderQuantity > 1) {
					this.orderQuantity--;
				}
			},

			// 创建订单
			async createOrder() {
				if (!this.orderAddress.trim()) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});
					return;
				}

				this.globalLoading = true;
				try {
					const token = uni.getStorageSync('token');
					const orderData = {
						good_id: this.selectedProduct.good_id,
						order_number: this.orderQuantity,
						address: this.orderAddress
					};

					console.log('创建订单数据:', orderData);

					const response = await new Promise((resolve, reject) => {
						uni.request({
							url: `${API_BASE_URL}/orders/`,
							method: 'POST',
							header: {
								'Authorization': `Bearer ${token}`,
								'Content-Type': 'application/json'
							},
							data: orderData,
							success: resolve,
							fail: reject
						});
					});

					if (response.statusCode === 200) {
						uni.showToast({
							title: '订单创建成功',
							icon: 'success'
						});
						this.closeOrderModal();
					} else {
						throw new Error(response.data?.detail || '创建订单失败');
					}
				} catch (error) {
					console.error('创建订单失败:', error);
					uni.showToast({
						title: error.message || '网络错误',
						icon: 'none'
					});
				} finally {
					this.globalLoading = false;
				}
			},

			// 格式化时间
			formatTime(timeString) {
				if (!timeString) return '';
				try {
					const date = new Date(timeString);
					return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
				} catch (e) {
					return timeString;
				}
			},

			// 格式化价格
			formatPrice(price) {
				if (!price) return '0.00';
				return parseFloat(price).toFixed(2);
			}
		}
	}
</script>

<style scoped>
	/* 新增样式 */
	.delete-btn {
		padding: 8rpx 16rpx;
		background: #ffebee;
		border: 1rpx solid #ffcdd2;
		border-radius: 6rpx;
	}

	.delete-text {
		font-size: 22rpx;
		color: #d32f2f;
		font-weight: 500;
	}

	.search-tips {
		text-align: center;
		padding: 30rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.search-tips text:first-child {
		font-size: 26rpx;
		color: #666;
	}

	.tips-action {
		font-size: 26rpx;
		color: #8A2BE2;
		text-decoration: underline;
	}

	/* 加载更多按钮样式 */
	.load-more-btn {
		text-align: center;
		padding: 30rpx;
	}

	.load-more-button {
		padding: 20rpx 60rpx;
		background: #f8f9fa;
		color: #666;
		border: 1rpx solid #e0e0e0;
		border-radius: 12rpx;
		font-size: 26rpx;
	}

	.load-more-button:active {
		background: #e9ecef;
		transform: scale(0.98);
	}

	/* 自定义地址选择器样式 */
	.address-item {
		position: relative;
		z-index: 10010;
	}

	.custom-address-selector {
		flex: 1;
		margin-left: 20rpx;
		position: relative;
	}

	.custom-select-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: white;
		cursor: pointer;
		transition: border-color 0.3s;
	}

	.custom-select-view:active {
		border-color: #8A2BE2;
	}

	.select-text {
		font-size: 26rpx;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.select-arrow {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
		transition: transform 0.3s;
	}

	.custom-select-options {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		z-index: 10020;
		max-height: 300rpx;
		overflow-y: auto;
		margin-top: 8rpx;
	}

	.custom-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 26rpx;
		color: #333;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.custom-option:last-child {
		border-bottom: none;
	}

	.custom-option:hover,
	.custom-option.active {
		background: #f8f9fa;
		color: #8A2BE2;
	}

	.default-tag {
		font-size: 22rpx;
		color: #8A2BE2;
		background: #f0ebff;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		margin-left: 10rpx;
	}

	.empty-option {
		justify-content: center;
		color: #999;
	}

	/* 全局加载遮罩 */
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.favorites-container {
		position: relative;
		min-height: 100vh;
		background: linear-gradient(180deg, #f9f7ff 0%, #f0ebff 100%);
	}

	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 50%, #DA70D6 100%);
		z-index: 0;
		overflow: hidden;
	}

	.bg-shape {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.bg-shape-1 {
		width: 200rpx;
		height: 200rpx;
		top: -100rpx;
		right: -50rpx;
	}

	.bg-shape-2 {
		width: 150rpx;
		height: 150rpx;
		bottom: 30rpx;
		left: -60rpx;
	}

	.bg-shape-3 {
		width: 100rpx;
		height: 100rpx;
		top: 80rpx;
		left: 25%;
	}

	/* 返回按钮 */
	.back-btn {
		position: fixed;
		top: 80rpx;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;
		backdrop-filter: blur(10px);
	}

	.back-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.content {
		position: relative;
		z-index: 1;
		height: 100vh;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
	}

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-top: 40rpx;
	}

	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.page-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.page-subtitle {
		font-size: 26rpx;
		color: #666;
		display: block;
	}

	/* 搜索框样式 */
	.search-section {
		margin-bottom: 40rpx;
	}

	.search-box {
		position: relative;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(138, 43, 226, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
	}

	.search-icon {
		font-size: 28rpx;
		color: #999;
		margin-right: 16rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-input::placeholder {
		color: #999;
	}

	.search-clear {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999;
	}

	/* 收藏列表样式 */
	.favorites-list {
		margin-bottom: 30rpx;
	}

	/* 空状态样式 */
	.empty-state {
		text-align: center;
		padding: 120rpx 0;
	}

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
		display: block;
	}

	.empty-title {
		font-size: 32rpx;
		color: #333;
		display: block;
		margin-bottom: 12rpx;
		font-weight: 600;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #888;
		line-height: 1.5;
	}

	.empty-action {
		margin-top: 30rpx;
	}

	.action-btn {
		padding: 20rpx 40rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 26rpx;
	}

	.action-btn:active {
		transform: scale(0.98);
	}

	/* 收藏卡片样式 */
	.favorite-card {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		backdrop-filter: blur(10px);
		box-shadow: 0 6rpx 24rpx rgba(138, 43, 226, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.product-basic {
		flex: 1;
	}

	.product-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.product-id {
		font-size: 24rpx;
		color: #888;
		display: block;
	}

	.card-actions {
		flex-shrink: 0;
	}

	.delete-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.card-content {
		flex: 1;
	}

	.product-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		margin-bottom: 20rpx;
	}

	.stat-item {
		text-align: center;
		padding: 16rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.stat-label {
		font-size: 22rpx;
		color: #666;
		display: block;
		margin-bottom: 4rpx;
	}

	.stat-value {
		font-size: 24rpx;
		color: #333;
		font-weight: 600;
		display: block;
	}

	.stat-value.price {
		color: #ff6b35;
	}

	.stat-value.rating {
		color: #ff6b35;
	}

	.product-description {
		padding: 16rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.desc-text {
		font-size: 24rpx;
		color: #333;
		line-height: 1.4;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.favorite-time {
		font-size: 24rpx;
		color: #999;
	}

	.action-buttons {
		display: flex;
		gap: 16rpx;
	}

	.action-btn.detail {
		padding: 12rpx 24rpx;
		background: #f8f9fa;
		color: #333;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.action-btn.buy {
		padding: 12rpx 24rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.action-btn.detail:active,
	.action-btn.buy:active {
		transform: scale(0.95);
	}

	/* 没有更多数据 */
	.no-more {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}

	/* 模态框样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9998;
		padding: 40rpx;
	}

	.modal-content {
		background: white;
		border-radius: 24rpx;
		width: 100%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
		z-index: 9999;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.product-detail-modal {
		max-width: 560rpx;
		max-height: 70vh;
	}

	.order-modal {
		max-width: 560rpx;
		max-height: 80vh;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		flex-shrink: 0;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.modal-close {
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}

	.modal-body {
		padding: 32rpx;
		flex: 1;
		overflow-y: auto;
		/* 确保内容可以滚动 */
	}

	.detail-section {
		margin-bottom: 32rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.detail-grid {
		display: grid;
		gap: 16rpx;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.detail-label {
		font-size: 26rpx;
		color: #666;
	}

	.detail-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.sales-stats {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.stat-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.stat-label {
		font-size: 26rpx;
		color: #666;
	}

	.stat-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 600;
	}

	.stat-value.rating {
		color: #ff6b35;
	}

	.stat-value.price {
		color: #ff6b35;
		font-size: 28rpx;
	}

	.description-content {
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.desc-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}

	/* 订单表单样式 */
	.order-info {
		padding: 20rpx 0;
	}

	.product-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.product-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}

	.product-price {
		font-size: 28rpx;
		color: #ff6b35;
		font-weight: 600;
	}

	.order-form {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.form-label {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.quantity-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333;
		border: none;
	}

	.quantity-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		min-width: 80rpx;
		text-align: center;
	}

	.total-amount {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	.total-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.total-value {
		font-size: 32rpx;
		color: #ff6b35;
		font-weight: 600;
	}

	.modal-footer {
		display: flex;
		padding: 32rpx;
		gap: 20rpx;
		flex-shrink: 0;
		border-top: 1rpx solid #f0f0f0;
	}

	.modal-button {
		flex: 1;
		padding: 24rpx;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.modal-button.cancel {
		background: #f8f9fa;
		color: #666;
		border: 1rpx solid #e0e0e0;
	}

	.modal-button.confirm {
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		color: white;
	}

	.modal-button.confirm:active {
		transform: scale(0.98);
	}

	/* 加载状态 */
	.loading-state {
		text-align: center;
		padding: 60rpx 0;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #8A2BE2;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin: 0 auto 20rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
	}

	.bottom-space {
		height: 40rpx;
	}

	.delete-btn {
		padding: 8rpx 16rpx;
		background: #ffebee;
		border: 1rpx solid #ffcdd2;
		border-radius: 6rpx;
	}

	.delete-text {
		font-size: 22rpx;
		color: #d32f2f;
		font-weight: 500;
	}

	.search-tips {
		text-align: center;
		padding: 30rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.search-tips text:first-child {
		font-size: 26rpx;
		color: #666;
	}

	.tips-action {
		font-size: 26rpx;
		color: #8A2BE2;
		text-decoration: underline;
	}

	/* 加载更多文字样式 */
	.load-more-section {
		text-align: center;
		padding: 40rpx 0;
	}

	.load-more-text {
		display: inline-block;
		padding: 20rpx 40rpx;
	}

	.load-more-link {
		font-size: 28rpx;
		color: #1890ff;
		text-decoration: underline;
		cursor: pointer;
		transition: color 0.3s;
	}

	.load-more-link:active {
		color: #096dd9;
	}
</style>